<script setup>
  import slUniCalendar from './components/sl-uni-calendar/sl-uni-calendar'
  import { onLoad } from '@dcloudio/uni-app'
  import { getUserTaskReport } from '@/apis/user.js'
  import { ref } from 'vue'

  const onMonthSwitch = (e) => {
    console.log(e, 'onMonthSwitch -- e')
    loadData(e.year, e.month)
  }

  const onChange = (e) => {
    console.log(e, 'e')
  }

  const userTaskInfo = ref({})

  const cur = new Date()

  const loadData = async (year = cur.getFullYear(), month = cur.getMonth() + 1) => {
    const res = await getUserTaskReport({
      year,
      month: (month + '').padStart(2, '0'),
    })
    userTaskInfo.value = res.data
  }

  onLoad(() => {
    loadData()
  })
</script>

<template>
  <view class="page-container">
    <sl-uni-calendar :show-month="false" @monthSwitch="onMonthSwitch" @change="onChange">
      <view class="data-overview">
        <view class="item">
          <text class="volumn">{{ userTaskInfo.taskAmounts }}</text>
          <text class="label">任务总量</text>
        </view>
        <view class="item">
          <text class="volumn">{{ userTaskInfo.completedAmounts }}</text>
          <text class="label">完成任务量</text>
        </view>
        <view class="item">
          <text class="volumn">{{ userTaskInfo.transportMileage }}</text>
          <text class="label">运输里程(km)</text>
        </view>
      </view>
    </sl-uni-calendar>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
